<template>
  <div class="deail">
    <detail-imgroll :name="name" :banner="banner" :gallery="gallery"></detail-imgroll>
    <detail-about :ticketList="ticketList"></detail-about>
    <detail-comment :comment="comment"></detail-comment>
    <detai-recommemd :ticketList="ticketList"></detai-recommemd>
  </div>
</template>

<script>
import axios from 'axios'
import DetailImgroll from './components/Imgroll.vue'
import DetailAbout from './components/About.vue'
import DetailComment from './components/Comment.vue'
import DetaiRecommemd from './components/Recommemd.vue'
export default {
  name: 'detail',
  components: {
    DetailImgroll,
    DetailAbout,
    DetailComment,
    DetaiRecommemd
  },
  data () {
    return {
      name: '',
      banner: '',
      gallery: [],
      ticketList: [],
      comment: []
    }
  },
  methods: {
    handleSuccess (res) {
      let dataObj = res.data
      if (dataObj.ret && dataObj.data) {
        let dataList = dataObj.data
        this.name = dataList.sightName
        this.banner = dataList.bannnerImg
        this.gallery = dataList.galleryImgs
        this.ticketList = dataList.ticketList
        this.comment = dataList.comment
      }
    }
  },
  mounted () {
    axios.get('/losaldata/details.json', {
      prams: {
        id: this.$route.params.id
      }
    })
      .then((res) => {
        this.handleSuccess(res)
      })
  }
}
</script>

<style lang="stylus" scoped="scoped">
  .deail
    background #F3F3F3
</style>
